/**************************************
 *
 * VLOOK™ CSS 多主题间的通用样式
 * (配合 base.less、主题.less 进行使用)
 *
 * V28.1
 * 2025-01-18
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

// -----
// 通用变量 #Common_LESS_Var
@themeEmail: "maxchow@qq.com";

// 对应插件中配套预置选项 vlook-query，插件中的同名变量为 --vlook-query
@vlookQueryDef: "ws=auto&";
@vlookQuery: @vlookQueryDef;
// 对应插件中配套预置选项 vlook-gray-mode，插件中的同名变量为 --vlook-gray-mode
@vlookGrayMode: "12-13:国家公祭日@zh;04-05:清明节@zh,ko";

@codeFontSize: 14px;
@tableRowNumTop: 4px; // 表格逐行自动编号的高度
@focusStyle: @aBorderWidth dashed var(--a-color); // 焦点、焦点行样式
@miniLineHeight: 1;
@defaultLineHeight: 1.5;
@paragraphPadding: .5em; // 段落空白
@paragraphInnerLineHeight: 1.5;
@figurePadding: 20px; // 插图内、间、行空白
@hoverBrightness: 90%;
@scrollFix: 8px; // 针对 Mermaid 图表，不添加会导致出现滚动条
@syntaxTipsFont: italic normal 12px/1 var(--v-f-fm-bd); // 语法提示字体设置

// 目录、文件 的当前节点、点击节点样式
@tocItemCurrent_boxShadow: 0 0 0 2px @aColor inset;

// 图片、插图边框宽度
@imgBorderWidth: 2px;

// --------------------
// 针对 a kbd 按钮链接的圆角风格选择
// 无圆角（方角）
.applyKbdRadius(@kbdStyle) when (@kbdStyle = none) {
    #write a kbd {
        padding: 6px 9px;
        border-radius: 0;
    }
}
// 小圆角
.applyKbdRadius(@kbdStyle) when (@kbdStyle = small) {
    #write a kbd {
        padding: 7px 10px;
        border-radius: var(--v-r-s);
    }
}
// 大圆角
.applyKbdRadius(@kbdStyle) when (@kbdStyle = big) {
    #write a kbd {
        padding: 8px 12px;
        border-radius: 40px;
    }
}
// 叶子圆角
.applyKbdRadius(@kbdStyle) when (@kbdStyle = leaf) {
    #write a kbd {
        padding: 8px 12px;
        border-radius: calc(var(--v-r-b) - 2px) calc(var(--v-r-b-xc) - 2px);
    }
}

// ==================== 主题的文档纹理背景 ==================== //

// 格子
@docBgImgLight_Grid: url("");
@docBgImgDark_Grid: url("");
// 双重格子
@docBgImgLight_Grid2: url("");
@docBgImgDark_Grid2: url("");
// 斜纹
@docBgImgLight_Twill: url("");
@docBgImgDark_Twill: url("");
// 反斜纹
@docBgImgLight_Twill_R: url("");
@docBgImgDark_Twill_R: url("");
// 电路
@docBgImgLight_EC: url("");
@docBgImgDark_EC: url("");
// 波浪
@docBgImgLight_Wave: url("");
@docBgImgDark_Wave: url("");
// 雪花
@docBgImgLight_Snow: url("");
@docBgImgDark_Snow: url("");

// 主题配套预置选项 vlook-header-autonum
// 针对 1-6 级标题前缀/自动编号内容
// 针对 counter() 支持使用有序列表的符号格式（decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha），如：counter(h1, upper-alpha)
@headerNumSeparator: " ";
@h1NumSeparator: @headerNumSeparator;
@h2NumSeparator: @headerNumSeparator;
@h3NumSeparator: @headerNumSeparator;
@h4NumSeparator: @headerNumSeparator;
@h5NumSeparator: @headerNumSeparator;
@h6NumSeparator: @headerNumSeparator;
@vHeaderAutoNum: "~`h1{{###@{headerNumSeparator}}},h2{{###@{headerNumSeparator}}},h3{{###@{headerNumSeparator}}},h4{{###@{headerNumSeparator}}},h5{{###@{headerNumSeparator}}}`";
@h1BeforeContent: counter(h1) "." @h1NumSeparator;
@h2BeforeContent: counter(h1) "." counter(h2) @h2NumSeparator;
@h3BeforeContent: counter(h1) "." counter(h2) "." counter(h3) @h3NumSeparator;
@h4BeforeContent: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) @h4NumSeparator;
@h5BeforeContent: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) @h5NumSeparator;
@h6BeforeContent: "◼︎" @h6NumSeparator;

// 针对 h1::before 的扩展样式
.genH1beforeExt() {}
// 针对 h2::before 的扩展样式
.genH2beforeExt() {}
// 针对 h2::before 的扩展样式
.genH2beforeExt() {}
// 针对 h3::before 的扩展样式
.genH3beforeExt() {}
// 针对 h4::before 的扩展样式
.genH4beforeExt() {}
// 针对 h5::before 的扩展样式
.genH5beforeExt() {}
// 针对 h6::before 的扩展样式
.genH6beforeExt() {}

// 针对 VLOOK CC 的扩展样式（在原选择器内）
.genCcTopLeftExt() {};
.genCcTopRightExt() {};
.genCcBottomLeftExt() {};
.genCcBottomRightExt() {};
// 自定义扩展样式（指定选择器）
.genCcExt() {};

// 题注文字、背景色
@captionTextColor: var(--d-fc);
@captionBackground: rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.3);

// 题注内容主体的边框
@captionContentBorder: ~'@{imgBorderWidth} solid var(--pn-c)';

// 标题的阴影样式
@h1Shadow: none;
@h2Shadow: none;
@h3Shadow: none;
@h4Shadow: none;
@h5Shadow: none;
@h6Shadow: none;

// 标题的文字阴影样式
@h1TextShadow: none;
@h2TextShadow: none;
@h3TextShadow: none;
@h4TextShadow: none;
@h5TextShadow: none;
@h6TextShadow: none;

// 标题的文字字体大小
@h1FontSize: 1.75em;
@h2FontSize: 1.625em;
@h3FontSize: 1.5em;
@h4FontSize: 1.375em;
@h5FontSize: 1.25em;
@h6FontSize: 1.125em;
@h7FontSize: 1.125em; // 引用块小标题、折叠标题

// 针对 h4 的扩展样式
.genH4Ext() {}
// 针对 h5 的扩展样式
.genH5Ext() {}

// 标题的文字轮廓样式
@h1TextStroke: initial;
@h2TextStroke: initial;
@h3TextStroke: initial;
@h4TextStroke: initial;
@h5TextStroke: initial;
@h6TextStroke: initial;

// 标题的左边框
@h1BorderLeft: 0;
@h2BorderLeft: 0;
@h3BorderLeft: 0;
@h4BorderLeft: 0;
@h5BorderLeft: 0;
@h6BorderLeft: 0;

// 标题的右边框
@h1BorderRight: 0;
@h2BorderRight: 0;
@h3BorderRight: 0;
@h4BorderRight: 0;
@h5BorderRight: 0;
@h6BorderRight: 0;

// 标题的上边框
@h1BorderTop: 0;
@h2BorderTop: 0;
@h3BorderTop: 0;
@h4BorderTop: 0;
@h5BorderTop: 0;
@h6BorderTop: 0;

// 标题的下边框
@h1BorderBottom: 0;
@h2BorderBottom: 0;
@h3BorderBottom: 0;
@h4BorderBottom: 0;
@h5BorderBottom: 0;
@h6BorderBottom: 0;

@headerLetterSpacing: 0;

// 标题边距
@headerPadding: 5px 0;
@h1Padding: @headerPadding;
@h2Padding: @headerPadding;
@h3Padding: @headerPadding;
@h4Padding: @headerPadding;
@h5Padding: @headerPadding;

// 标题内文本边距
@h1SpanPadding: 0;
@h2SpanPadding: 0;
@h3SpanPadding: 0;
@h4SpanPadding: 0;
@h5SpanPadding: 0;

// 标题圆角
@headerBorderRadius: var(--v-r-b);
@h1BorderRadius: @headerBorderRadius;
@h2BorderRadius: @headerBorderRadius;
@h3BorderRadius: @headerBorderRadius;
@h4BorderRadius: @headerBorderRadius;
@h5BorderRadius: @headerBorderRadius;

// 标题内文本圆角
@h1SpanBorderRadius: 0;
@h2SpanBorderRadius: 0;
@h3SpanBorderRadius: 0;
@h4SpanBorderRadius: 0;
@h5SpanBorderRadius: 0;

// 标题背景
@headerBackground: none;
@h1Bg: @headerBackground;
@h2Bg: @headerBackground;
@h3Bg: @headerBackground;
@h4Bg: @headerBackground;
@h5Bg: @headerBackground;

// 主题中强制控制，对大于指定层级的标题都不显示
// 会同时应用到章节导航时跳转的章节层级
// 对应 CSS 中的同名变量 --v-hide-outline-over
@hideOutlineOver: 99;

// 标题颜色
@h1Color: var(--h-f);
@h2Color: var(--h-f);
@h3Color: var(--h-f);
@h4Color: var(--h-f);
@h5Color: var(--h-f);
@h6Color: var(--h-f);

// 标题前缀 before 颜色
@contentHeaderNumColor: var(--h-f);
@contentHeaderNumOpacity: .5;
@liBeforeColor: var(--h-f);

// 生成标题文字渐变色（h1）
.genLinearGradientHeader(@header, @lg) when (@header = h1) {
    #write @{escBackcoverId}>span,
    @{coverAfterYAML}~@{escBackcoverId}>span,
    @{coverWithoutYAML}~@{escBackcoverId}>span {
        background: @lg;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
}
// 生成标题文字渐变色（除 h1）
.genLinearGradientHeader(@header, @lg) when not (@header = h1) {
    #write @{header}>span {
        background: @lg;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
}

// 有序列表分级符号
@ol1StyleType: decimal; // 阿拉伯数字
@ol2StyleType: lower-alpha; // 小写的英文字母
@ol3StyleType: lower-roman; // 小写的罗马数字
@ol4StyleType: decimal-leading-zero; // 以 0 前导的阿拉伯数字
@ol5StyleType: upper-alpha; // 大写的英文字母
@ol6StyleType: upper-roman; // 大写的罗马数字
// 无充列表分级符号
@ul1StyleType: disc; // 实心圆点
@ul2StyleType: square; // 方块
@ul3StyleType: circle; // 空心圆点
@ul4StyleType: disc;
@ul5StyleType: square;
@ul6StyleType: circle;

// 连续标题背景
@continuousHeaderBG: none;

@h1Margin: 2.5em 0 0 0;
@h2Margin: 2.5em 0 0 0;
@h3Margin: 2.5em 0 0 0;
@h4Margin: 2em 0 0 0;
@h5Margin: 2em 0 0 0;
@h6Margin: 1em 0 0 0;

// 标题对齐方式
@headerTextAlign: left;
@h1TextAlign: @headerTextAlign;
@h2TextAlign: @headerTextAlign;
@h3TextAlign: @headerTextAlign;
@h4TextAlign: @headerTextAlign;
@h5TextAlign: @headerTextAlign;
@h6TextAlign: @headerTextAlign;
@h7TextAlign: center; // 引用小标题

// 多个连续标题间的距离
@hContinuous: 0;

// 标签默认色号 --- 未合适
@tagBgDefaultColorCode: "t2";
@tagFgDefaultColorCode: ~"t2-a";

// 引用块默认色样式（与主题配套使用）
@quoteBgDefault: var(--blockquote-bg);
@quoteBoxShadowDefault: none;

// 引用块边框宽度
@defQuoteBorderWidth: .375em;

// 引用块小标题、折叠标题的分隔线宽度
@quoteTitleBorderWidth: 1px;

// 引用块左边框
@quoteBorderLeft: none;
@quoteRadius: var(--v-r-b) var(--v-r-b-xc);

@theme1FadeDark: @theme1Fade;
@theme2FadeDark: @theme2Fade;

// 行内代码
@codeTextColor: @theme2;
@codeTextColorDark: @theme2Dark;
@codeBgColor: var(--d-bc-lg);
@codeBgColorDark: var(--d-bc-dk);

// 代码块背景图
@codeBlockBackground: none;
@codeBlockBackgroundDark: none;
@codeBlockBackgroundSize: auto;
@codeBlockBackgroundRepeat: inherit;
@codeBlockBackgroundPosition: inherit;

// 封面、封底标题的文字阴影样式
@coverTextShadow: none;
@backcoverTextShadow: none;

// 封面、封底标题的文字轮廓样式
@coverTextStroke: initial;
@backcoverTextStroke: initial;

@coverBgSize: auto;
@coverBgSizeForMobile: auto;
@coverBgPosition: 0 0;
@coverBgPositionForMobile: 0 0;

@ccLeftRightPadding: 60px;
@ccLeftRightPaddingForMobile: 20px;

@backcoverBgSize: auto;
@backcoverBgSizeForMobile: auto;
@backcoverBgPosition: 0 0;
@backcoverBgPositionForMobile: 0 0;

// 要与 CSS 变量 --mark-bg-h --mark-bg-h-inset 一并修改
@markBgHeight: .5em;

:root {
    // 要与 LESS 变量 @markBgHeight 一并修改
    --mark-bg-h: .75em;
    --mark-bg-h-inset: -.75em;

    // 文档扩展区域背景
    --thm-doc-ext-bg: linear-gradient(180deg, var(--d-bc), var(--ac-t1-fade));

    --thm-c-bg-size: @coverBgSize;
    --thm-c-bg-pos: @coverBgPosition;
    --thm-cc-left-right-pd: @ccLeftRightPadding;
    --thm-bc-bg-size: @backcoverBgSize;
    --thm-bc-bg-pos: @backcoverBgPosition;
}
@docExtContent: "";
@docExtBackgroundColor: var(--d-bc);
@docExtBackgroundImage: var(--thm-doc-ext-bg);
@docExtBackgroundSize: auto;
@docExtBackgroundRepeat: no-repeat;
@docExtBackgroundPosition: left top;
@docExtBackgroundFilter: none;

// 封面内多级标签样式
@badgeColorInCover: @buttonForeHoverColor;
@badgeBakgroundInCover: var(--a-hover-color);
@badgeBorderColorInCover: var(--d-bc);
@badgeBorderWidthInCover: 0;

@welcomePageForeColor: @buttonForeColor;
@welcomePageBgColor: @buttonBgColor;

// ==========

@writeOnEditing: ~"content>#write";
@writeOnHTML: ~".typora-export-content>#write";
@onHTML: ~"body.typora-export";

// ==================== 生成封面内各类样式 ==================== //

.genCoverSup() {}

// 下划线（副标题）样式
.genCoverU() {
    font: var(--v-f-w-bd) .75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// 加粗（发布人）样式
.genCoverStrong() {}
// 加粗（发布人）内分块内容的样式
.genCoverStrongSpan() {}
// 加粗（发布人）前缀样式
.genCoverStrongBefore() {
    content: "by ";
    opacity: .6;
}
// 加粗（发布人）后缀样式
.genCoverStrongAfter() {}

// 斜体（版权信息）样式
.genCoverEm() {
    font: normal var(--v-f-w-bd) .4em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
}

// ==================== 生成不同风格的表格 ==================== //

// 生成表格通用部分
.genTableCommonStyle() {
    // 表格的容器
    #write figure {
        margin-top: @paragraphPadding;
    }
    // 表格
    :is(#write, .v-pic-in-pic) table {
        border-collapse: inherit;
        border-spacing: 0;
        background: var(--d-bc);
        line-height: @defaultLineHeight;
        word-break: break-all;
        white-space: pre-wrap;
        vertical-align: text-top;
        width: auto;
    }
    #write figure,
    :is(#write, .v-pic-in-pic) table {
        border-radius: var(--v-r-b) var(--v-r-b-xc);
    }

    // 表头
    :is(#write, .v-pic-in-pic) table>thead>tr>th {
        font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
        margin: 0;
        padding: var(--tbl-cell-padding);
    }

    // 单元格
    :is(#write, .v-pic-in-pic) table td {
        margin: 0;
        padding: var(--tbl-cell-padding);
    }

    // 单元格最小宽度控制
    :is(#write, .v-pic-in-pic) table tr>:is(th, td) {
        word-break: break-word;
        min-width: 120px;
    }

    // 合并了所有列（即空白行）的样式
    .v-table-colspan-all {
        padding-left: 5px;
        background: var(--pn-c);
    }
    .v-table-colspan-all::before {
        content: ""; // 不显示对应的行号
    }

    // 空白单元格
    :is(#write, .v-pic-in-pic) table .v-empty-cell {
        padding: 1px !important;
        min-width: 0;
    }
}

@tblBdWidth: 1px;
// 表头
@thead: ~':is(#write, .v-pic-in-pic) table>thead th';
@thead_firstRow_firstCell: ~':is(#write, .v-pic-in-pic) table>thead>tr:first-child>:first-child';
@thead_firstRow_lastCell: ~':is(#write, .v-pic-in-pic) table>thead>tr:first-child>:last-child';
@thead_lastColumn_lastCell: ~':is(#write, .v-pic-in-pic) table>thead>tr>:last-child';
@thead_lastRow: ~':is(#write, .v-pic-in-pic) table>thead>tr:last-child>th';
// 表体
@tbody: ~':is(#write, .v-pic-in-pic) table>tbody td';
@tbody_not_lastRow: ~':is(#write, .v-pic-in-pic) table>tbody>tr:not(:last-child)>td';
@tbody_firstRow: ~':is(#write, .v-pic-in-pic) table>tbody>tr:first-child>td';
@tbody_lastRow: ~':is(#write, .v-pic-in-pic) table>tbody>tr:last-child>td';
@tbody_lastColumn: ~':is(#write, .v-pic-in-pic) table>tbody>tr>:last-child';
@tbody_lastRow_firstCell: ~':is(#write, .v-pic-in-pic) table>tbody>tr:last-child>:first-child';
@tbody_lastRow_lastCell: ~':is(#write, .v-pic-in-pic) table>tbody>tr:last-child>:last-child';
@tbody_2nRow: ~':is(#write, .v-pic-in-pic) table>tbody>tr:nth-child(2n) td';

// 生成表格基础样式
.genTableBaseStyle() {
    // 表格
    :is(#write, .v-pic-in-pic) table {
        border: 2px solid var(--d-fc);
        border-right-width: 1px;
        border-bottom-width: 1px;
    }

    // 所有单元格
    :is(#write, .v-pic-in-pic) table :is(th, td) {
        border: 1px solid var(--d-fc);
        border-left-width: 0;
        border-top-width: 0;
    }

    // 表头首行的首列
    @{thead_firstRow_firstCell} {
        border-top-left-radius: calc(var(--v-r-b) - @tblBdWidth);
    }

    // 表头首行的尾列
    @{thead_firstRow_lastCell} {
        border-top-right-radius: calc(var(--v-r-b-xc) - @tblBdWidth);
    }

    // 表体（tbody）首行
    @{tbody_firstRow} {
        border-top-width: 1px;
    }

    // 表体（tbody）末行的首列
    @{tbody_lastRow_firstCell} {
        border-bottom-left-radius: calc(var(--v-r-b-xc) - @tblBdWidth);
    }

    // 表体（tbody）末行的尾列
    @{tbody_lastRow_lastCell} {
        border-bottom-right-radius: calc(var(--v-r-b) - @tblBdWidth);
    }

    // 针对 table 行 hover 样式
    @{writeOnEditing} table tr.md-focus-container>:is(th, td),
    @{writeOnHTML} table:not([data-tbl-x="true"]) tr:hover>:is(th, td) {
        box-shadow: 0 -3px 0 0 var(--ac-t2-fade) inset;
        border-bottom-color: var(--ac-t2) !important;
    }
}

// 标准风格（如正式文档、国标文档等用的常规表格）
.genTableStyle(@style) when (@style = simple) {
    // 公共部分
    .genTableCommonStyle();
    // 基础样式
    .genTableBaseStyle();
}

// 现代风格（内置主题默认）
.genTableStyle(@style) when (@style = modern) {
    // 公共部分
    .genTableCommonStyle();
    // 基础样式
    .genTableBaseStyle();

    // 表格
    :is(#write, .v-pic-in-pic) table {
        border-color: var(--d-fc-a);
    }

    // 单元格
    @{thead},
    @{tbody} {
        border-color: var(--d-fc-a)
    }

    // 表头单元格
    @{thead} {
        background: var(--pn-c);
    }

    // 表体（tbody）首行
    @{tbody_firstRow} {
        border-top-width: 0;
    }

    // 表体（tbody）
    @{tbody} {
        border-bottom: 1px solid var(--pn-c);
    }

    // 表体（tbody）末尾
    @{tbody_lastRow} {
        border-bottom: 1px solid var(--d-fc-a);
    }

    // 表体（tbody）偶数行，斑马线样式
    @{tbody_2nRow} {
        background: rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.3);
    }
}

// 高对比风格
.genTableStyle(@style) when (@style = vivid) {
    // 公共部分
    .genTableCommonStyle();
    // 基础样式
    .genTableBaseStyle();

    // 表格
    :is(#write, .v-pic-in-pic) table {
        border: none;
    }

    // 表头
    @{thead} {
        border-color: var(--d-bc);
        color: var(--d-bc);
        background: var(--d-fc-a);
    }

    // 表体（tbody）首行
    @{tbody_firstRow} {
        border-top-width: 0;
    }

    // 表体（tbody）
    @{tbody} {
        border-color: var(--d-fc-a) !important;
    }

    // 表体（tbody）尾列
    @{tbody_lastColumn} {
        border-right-width: 0 !important;
    }

    // 表体（tbody）末行
    @{tbody_lastRow} {
        border-bottom-width: 2px !important;
    }
}

// 扁平风格
.genTableStyle(@style) when (@style = flat) {
    // 公共部分
    .genTableCommonStyle();
    // 基础样式
    .genTableBaseStyle();

    // 表格
    :is(#write, .v-pic-in-pic) table {
        border: none;
    }

    // 表头
    @{thead} {
        color: var(--d-fc-a);
        border: none;
    }

    // 表体（tbody）
    @{tbody} {
        border-bottom: 1px solid var(--pn-c);
        border-right-width: 0;
    }

    // 表体（tbody）首行
    @{tbody_firstRow} {
        border-top: 2px solid var(--d-fc-a);
    }

    // 表体（tbody）末尾
    @{tbody_lastRow} {
        border-bottom: 1px solid var(--d-fc-a);
    }

    // 表体（tbody）偶数行，斑马线样式
    @{tbody_2nRow} {
        background: rgba(var(--pn-fade-r), var(--pn-fade-g), var(--pn-fade-b), 0.3);
    }
}

// 报告风格（如论文、报告用的三线表）
.genTableStyle(@style) when (@style = report) {
    // 公共部分
    .genTableCommonStyle();
    // 基础样式
    .genTableBaseStyle();

    // 表格
    :is(#write, .v-pic-in-pic) table {
        border-left-width: 0;
        border-right-width: 0;
    }

    // 表头、表体的最后一列
    @{thead_lastColumn_lastCell},
    @{tbody_lastColumn} {
        border-right-width: 0;
    }

    // 表体（tbody）
    @{tbody_not_lastRow} {
        border-bottom-width: 0;
    }

    // 表体（tbody）首行
    @{tbody_firstRow} {
        border-top-width: 0;
    }

    // 表体（tbody）末行
    @{tbody_lastRow} {
        border-bottom-width: 1px;
    }
}

// ==================== 生成指定有序列表样式 ==================== //

// 注意 :not(@{hr_MdHr})+ 指排除分栏时的有序列表
.genOrderList(@style, @shape) {
    #write>:not(@{hr_MdHr})+ol,
    #write @{quote_details}>:not(@{hr_MdHr})+ol {
        counter-reset: v-list-counter;
        padding-left: 1.625em;
    }
    // 对 #write :is(ul,ol) 的微调
    #write>:not(@{hr_MdHr})+ol>ol,
    #write @{quote_details}>:not(@{hr_MdHr})+ol>ol {
        padding-left: 1.5em;
    }
    #write>:not(@{hr_MdHr})+ol>li,
    #write @{quote_details}>:not(@{hr_MdHr})+ol>li {
        counter-increment: v-list-counter;
        list-style-type: none !important;
    }
    @{writeOnEditing}>:not(@{hr_MdHr})+ol>li>p,
    @{writeOnEditing} @{quote_details}>:not(@{hr_MdHr})+ol>li>p {
        display: list-item !important;
    }

    // 有序列表符号样式
    #write>:not(@{hr_MdHr})+ol>li::before,
    #write @{quote_details}>:not(@{hr_MdHr})+ol>li::before {
        content: counter(v-list-counter);
        // 生成背景
        .genOrderListBg(@style);
        // 生成形状
        .genOrderListShape(@shape);
        // font-family: var(--v-f-fm-num);
        font-family: var(--v-f-fm-tag);
        font-weight: bold;
        font-size: .875em;
        text-align: center;
        margin-left: -26px;
        margin-top: .25em;
        float: left;
        line-height: 20px;
        height: 20px;
        aspect-ratio: 1/1 !important;
        padding: 0;
    }
    // 编辑时微调
    @{writeOnEditing}>:not(@{hr_MdHr})+ol>li::before,
    @{writeOnEditing} @{quote_details}>:not(@{hr_MdHr})+ol>li::before {
        line-height: 18px;
    }
    // 第 10+ 的样式
    #write>:not(@{hr_MdHr})+ol>li:nth-child(n+10)::before,
    #write @{quote_details}>:not(@{hr_MdHr})+ol>li:nth-child(n+10)::before {
        font-size: .75em;
    }

    // 当前输入行
    @{writeOnHTML}>:not(@{hr_MdHr})+ol>li:hover::before,
    @{writeOnHTML} @{quote_details}>:not(@{hr_MdHr})+ol>li:hover::before,
    @{writeOnEditing}>:not(@{hr_MdHr})+ol>li.md-focus-container::before,
    @{writeOnEditing} @{quote_details}>:not(@{hr_MdHr})+ol>li.md-focus-container::before {
        color: @buttonForeHoverColor !important;
        background-color: var(--a-hover-color) !important;
        box-shadow: none;
    }

    // 生成不同风格的背景
    .genOrderListBg(@style) when (@style = block) {
        color: var(--d-bc) !important;
        background-color: var(--d-fc);
    }
    .genOrderListBg(@style) when (@style = frame) {
        color: var(--d-fc);
        background-color: var(--d-bc);
        box-shadow: 0 0 0 1px var(--d-fc-a) inset; // 不用 border 的原因是渲染会上移 1px
    }

    // 生成不同形状
    .genOrderListShape(@shape) when (@shape = rect) {
        border-radius: calc(var(--v-r-s) - 2px) calc(var(--v-r-s-xc) - 2px);
    }
    .genOrderListShape(@shape) when (@shape = circle) {
        border-radius: 50%;
    }
    .genOrderListShape(@shape) when (@shape = drop) {
        border-radius: 50% 0 50% 50%;
    }
}

// ==================== 生成表格、插图的不同对齐方式的样式 ==================== //

// 居中对齐。非居中对齐时不调用
.genTableAndFigureAlign(@align) when (@align = center) {
    // 表格居中
    :is(#write, .v-pic-in-pic) table {
        margin: 0 auto;
    }

    .md-diagram-panel>.md-diagram-panel-preview>svg { // 编辑时
        margin: auto !important;
    }

    // 明信片
    @{writeOnEditing} .md-image[data-src*="#card"]>img,
    @{writeOnEditing} .md-image[data-src*="#cardd"]::after,
    #write .v-post-card,
    #write img[src*="#card"],
    #write svg[data-inject-url*="#card"],
    #write :is(p, blockquote):has(img[src*="#card"]),
    // 段落中只有图片时的样式
    // @{onlyImageInPg},
    // 视频嵌入代码
    @{iframeVideoOnEditing} @{biliVideo},
    @{iframeVideoOnEditing} @{douyinVideo},
    @{iframeVideoOnEditing} @{xiguaVideo},
    @{iframeVideoOnEditing} @{qqVideo},
    @{iframeVideoOnEditing} @{youtubeVideo},
    @{iframeVideo} @{biliVideo},
    @{iframeVideo} @{douyinVideo},
    @{iframeVideo} @{xiguaVideo},
    @{iframeVideo} @{qqVideo},
    @{iframeVideo} @{youtubeVideo},
    // 编辑时 Mermaid 图的预览
    .mermaid-svg, // 从 Typora 1.10.2-dev 开始启用
    .md-diagram-panel-preview>svg {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }

    // 编辑时题注居中
    @nonFigure: ~':not(:is([data-src*="#icon"],[data-src*="#logo"]))';
    @{writeOnEditing} p:has([md-inline="em"]:only-child>em>[md-inline="highlight"]>mark),
    // 段落中只有图片链接时的样式
    // @{onlyImageLinkInPg},
    #write .md-fences-adv-panel, // 针对 Mermaid 图
    .v-cap-cntr, // 导出后题注居中
    .v-caption.tbl>.v-cap-1 { // 表格题注样式
        text-align: center !important;
    }

    #write .v-post-card, // 明信片样式
    .v-cap-cntr.expander::before, // 折叠提示的样式居中
    @{writeOnEditing} .ty-table-edit { // 编辑时表格工具栏
        left: 50%;
        transform: translateX(-50%);
    }
    // 编辑时表格工具栏
    @{writeOnEditing} .ty-table-edit {
        margin-left: 0;
    }
}

// ==================== 标题 after 样式选择器 ==================== //

// 标题 after 样式
@headerAfter: ~"#write :is(h1,h2,h3,h4,h5)>span::after";

// 针对封底 span::after 的微调处理
@backcoverSpanAfter: ~"@{coverAfterYAML}~@{backcoverId}>span::after";
@backcoverSpanWithoutYAMLafter: ~"@{coverWithoutYAML}~@{backcoverId}>span::after";

// ==================== 多级标签样式 ==================== //

@codePaddingTop: 3px;
@codePaddingLeft: 6px;
@codePaddingRight: 8px;
@codeMarginForCap: -1px;

@codeValueRadius: calc(var(--v-r-tag) - @codePaddingTop);
@codeValueRadiusXC: calc(var(--v-r-tag-xc) - @codePaddingTop);

// -----
// 标准风格
.genBadgeStyle(@style) when (@style = std) {
    // 多级标签内容（第2段）公共样式
    // 编辑时的多级标签内容（第2段）
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:first-child) > code, // :first-child 时为 标签 tag
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:only-child):first-child > code,  // 没有标题，只有 value 和 value2
    .v-badge-value {
        border-radius: @codeValueRadius @codeValueRadiusXC;
        background: var(--d-bc) !important;
        padding: @codePaddingTop @codePaddingLeft;
        margin: 1px 1px 1px 4px;
    }

    // 三段式，多级标签有两个内容时微调
    @{badgeOnEditingPrefix} > @{codeOnEditing}+span:last-child,
    .v-badge-value.hastwo {
        margin: 1px 4px !important;
    }

    // 多级标签没有标题（第1段），只有两个内容 value 和 value2
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:only-child):first-child > code,
    .v-badge-name > .v-badge-value:first-child {
        margin: 1px 4px 1px 1px !important;
    }
}

// -----
// 活力风格
@dynDeg: 104deg;
@dynOffset: 6px;
@dynPadding: 8px;
.genBadgeStyle(@style) when (@style = dyn) {
    // 多级标签内容（第2段）公共样式
    // 编辑时的多级标签内容（第2段）
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:first-child) > code, // :first-child 时为 标签 tag
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:only-child):first-child > code,  // 没有标题，只有 value 和 value2
    .v-badge-value {
        border-radius: 0 @codeValueRadiusXC @codeValueRadius 0;
        background: linear-gradient(@dynDeg, transparent @dynOffset, var(--d-bc) @dynOffset, var(--d-bc)) !important;
        padding: @codePaddingTop @codePaddingRight @codePaddingTop @dynPadding;
        margin: 1px 1px 1px 0;
    }

    // 三段式，多级标签有两个内容时微调
    // 第 2 个内容
    @{badgeOnEditingPrefix} > @{codeOnEditing}+span:last-child {
        margin: 1px @codePaddingLeft 1px 0 !important;
    }
    // 第 1 个内容
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:first-child):not(:last-child) > code,
    .v-badge-value.hastwo {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: 10px !important;
        border-radius: 0;
        background: linear-gradient(@dynDeg, transparent @dynOffset, var(--d-bc) @dynOffset, var(--d-bc) calc(100% - @dynOffset), transparent calc(100% - @dynOffset)) !important;
    }

    // 多级标签没有标题（第1段），只有两个内容 value 和 value2
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:only-child):first-child > code,
    .v-badge-name > .v-badge-value:first-child {
        margin-left: 1px !important;
        margin-right: 0 !important;
        padding-left: @codePaddingLeft !important;
        padding-right: @dynPadding !important;
        border-radius: @codeValueRadius 0 0 @codeValueRadiusXC;
        background: linear-gradient(@dynDeg, var(--d-bc) 0%, var(--d-bc) calc(100% - @dynOffset), transparent calc(100% - @dynOffset)) !important;
    }
}

// -----
// 胶囊风格
.genBadgeStyle(@style, @style2: cap) when (@style = cap) {
    // 多级标签样式名称公共样式
    @{badgeOnEditing},
    @{badgeOnEditing2},
    .v-badge-name {
        padding-right: 0 !important;
    }

    // 多级标签内容（第2段）公共样式
    // 编辑时的多级标签内容（第2段）
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:first-child) > code, // :first-child 时为 标签 tag
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:only-child):first-child > code,  // 没有标题，只有 value 和 value2
    .v-badge-value {
        border-radius: 0 calc(var(--v-r-tag-xc) - 1px) calc(var(--v-r-tag) - 1px) 0;
        color: var(--d-bc) !important;
        .genBadgeCapBg(@style2);
        .genBadgeDynBgValue1(@style2);
    }

    // 三段式，多级标签有两个内容时微调
    // 第 2 个内容
    @{badgeOnEditingPrefix} > @{codeOnEditing}+span:last-child {
        margin: 1px @codePaddingLeft 1px 0;
    }
    // 第 1 个内容
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:first-child):not(:last-child) > code,
    .v-badge-value.hastwo {
        margin: @codeMarginForCap @codePaddingLeft;
        padding-left: @dynPadding !important;
        border-radius: 0;
        .genBadgeDynBgValue2(@style2);
    }

    // 多级标签没有标题（第1段），只有两个内容 value 和 value2
    @{badgeOnEditingPrefix} > @{codeOnEditing}:not(:only-child):first-child > code,
    .v-badge-name > .v-badge-value:first-child {
        margin: @codeMarginForCap 2px @codeMarginForCap @codeMarginForCap !important;
        border-radius: var(--v-r-tag) 0 0 var(--v-r-tag-xc);
        margin-right: @codePaddingLeft !important;
        .genBadgeDynBgNoName(@style2);
    }

    // ----------

    // 生成 cap 风格默认的背景
    .genBadgeCapBg(@style2) when (@style2 = cap) {
        margin: @codeMarginForCap @codeMarginForCap @codeMarginForCap @codePaddingLeft;
        padding: 5px @codePaddingLeft;
        background: var(--d-fc) !important;
    }

    // 生成 cap + dyn 风格的背景
    .genBadgeDynBgValue1(@style2) when (@style2 = dyn) {
        margin-left: 2px !important;
        margin-top: -1px;
        margin-bottom: -1px;
        padding: 5px 6px 5px @dynPadding !important;
        background: linear-gradient(@dynDeg, transparent @dynOffset, var(--d-fc) @dynOffset, var(--d-fc)) !important;
    }
    // 生成 cap + dyn 风格的背景（有两个 value 时）
    .genBadgeDynBgValue2(@style2) when (@style2 = dyn) {
        margin-left: 2px !important;
        margin-right: 2px !important;
        padding-right: @codePaddingRight !important;
        background: linear-gradient(@dynDeg, transparent @dynOffset, var(--d-fc) @dynOffset, var(--d-fc) calc(100% - @dynOffset), transparent calc(100% - @dynOffset)) !important;
    }
    // 生成 cap + dyn 风格的背景（无标题时）
    .genBadgeDynBgNoName(@style2) when (@style2 = dyn) {
        margin-right: 2px !important;
        padding-right: @dynPadding !important;
        background: linear-gradient(@dynDeg, var(--d-fc), var(--d-fc) calc(100% - @dynOffset), transparent calc(100% - @dynOffset)) !important;
    }
}

// ==================== 生成加粗文本扩展样式 ==================== //

.genExtBoldText() {
    @centerTextOnEditing: ~'@{writeOnEditing}>p>[md-inline="strong"]:only-child:has(>strong)';
    @centerTextOnHTML: ~'@{writeOnHTML}>p>strong:only-child';
    @{centerTextOnEditing},
    @{centerTextOnHTML} {
        display: block;
        text-align: center;
        font-size: 1.125em;
        line-height: @defaultLineHeight;
        padding: 10px 40px;
    }
}

// ==================== 生成下划线文本扩展样式 ==================== //

.genExtUnderText() {
    // 下划线
    @underlineOnlyChild: ~'@{writeOnEditing}>p>[md-inline="underline"]:only-child';
    @onlyUnderlineTextOnEditing: ~'@{underlineOnlyChild}:has(>u)';
    @onlyUnderlineTextOnHTML: ~'@{writeOnHTML}>p>u:only-child';
    @{onlyUnderlineTextOnEditing},
    @{onlyUnderlineTextOnHTML} {
        display: block;
        text-align: center;
        font-size: 1.125em;
        line-height: @defaultLineHeight;
        padding: 10px 40px 15px;
        border: none;
    }
    @{underlineOnlyChild}>u {
        border: none;
    }

    // 下划线 after
    @{onlyUnderlineTextOnEditing}:after,
    @{onlyUnderlineTextOnHTML}:after {
        content: "";
        // margin: -10px 0 0 10px;
        position: absolute;
        margin-top: 2em;
        height: 2px;
        // background-color: var(--pn-c-a);
        opacity: .4;
        background-image: linear-gradient(90deg, var(--ac-t1), var(--ac-t2));
        width: calc(100px + 10%);
        left: calc(50% - 50px - 5%);
    }
}

// ==================== 生成高亮文本扩展样式 ==================== //

// 双引号（圆）
@quoteBeforeImage_q01: url("");
@quoteAfterImage_q01: url("");
// 双引号（方）
@quoteBeforeImage_q02: url("");
@quoteAfterImage_q02: url("");
// 双引号（尖）
@quoteBeforeImage_q03: url("");
@quoteAfterImage_q03: url("");
// 双圆环
@quoteBeforeImage_c01: url("");
@quoteAfterImage_c01: url("");
// 叶子
@quoteBeforeImage_l01: url("");
@quoteAfterImage_l01: url("");
// 半框（圆角）
@quoteBeforeImage_f01: url("");
@quoteAfterImage_f01: url("");
// 半框（方角）
@quoteBeforeImage_f02: url("");
@quoteAfterImage_f02: url("");

.genExtHighlightText(@beforeImage, @afterImage, @opacity : .3) {
    @marginWidth: 10px;
    @imageWidth: 40px;
    @imageHeight: 30px;

    // 高亮
    @highlightOnlyChild: ~'@{writeOnEditing}>p>[md-inline="highlight"]:only-child';
    @onlyHighlightTextOnEditing: ~'@{highlightOnlyChild}:has(>mark)';
    @onlyHighlightTextOnHTML: ~'@{writeOnHTML}>p>mark:only-child';
    @{onlyHighlightTextOnEditing},
    @{onlyHighlightTextOnHTML} {
        display: block;
        text-align: center;
        // font-style: @fontStyle;
        font-size: 1.25em;
        line-height: @defaultLineHeight;
        padding: 20px (@imageWidth + @marginWidth);
        box-shadow: none;
    }
    @{highlightOnlyChild}>mark {
        box-shadow: none;
    }

    // 高亮 before
    @{onlyHighlightTextOnEditing}:before,
    @{onlyHighlightTextOnHTML}:before {
        content: "";
        opacity: @opacity;
        margin: -@marginWidth 0 0 -(@imageWidth + @marginWidth);
        position: absolute;
        width: @imageWidth;
        height: @imageHeight;
        background: linear-gradient(135deg, var(--ac-t1) 10px, var(--ac-t2));
        mask-image: @beforeImage;
        mask-repeat: no-repeat;
        mask-position: center center;
    }

    // 高亮 after
    @{onlyHighlightTextOnEditing}:after,
    @{onlyHighlightTextOnHTML}:after {
        content: "";
        opacity: @opacity;
        margin: @marginWidth 0 0 @marginWidth;
        position: absolute;
        width: @imageWidth;
        height: @imageHeight;
        background: linear-gradient(135deg, var(--ac-t2), var(--ac-t1) calc(100% - @marginWidth));
        mask-image: @afterImage;
        mask-repeat: no-repeat;
        mask-position: center center;
    }
}

// ==================== 生成 GitHub Style Alert 各类型相关样式 ==================== //

// 生成基础部分
.genGitHubStyleAlertCssBase(@type, @accColor, @btnBg) {
    // 引用块小标题
    #write .md-alert-@{type} @{quoteTitle},
    // 编辑时的 summary
    @{writeOnEditing} .md-alert-@{type} @{summaryOnEditing},
    // 导出后的 summary
    #write .md-alert-@{type} summary,
    // 编辑时的题注前缀
    @{writeOnEditing} .md-alert-@{type} @{cap1_OnEditing}::before,
    @{writeOnEditing} .md-alert-@{type} @{cap2_OnEditing}::before,
    // 导出后的题注前缀
    #write .md-alert-@{type} .v-caption:not(.codeblock) .v-cap-1>span,
    // 链接
    #write .md-alert-@{type} a {
        color: ~"var(--ac-@{accColor})";
    }
    #write .md-alert-@{type} a>@{svgGs} {
        fill: ~"var(--ac-@{accColor})" !important;
    }
    #write .md-alert-@{type} a>img[src*="fill=text"] {
        filter: drop-shadow(@fillOffset 0 0 ~"var(--ac-@{accColor})") !important;
    }
    #write .md-alert-@{type} a:hover {
        color: var(--a-hover-color) !important;
    }
    #write .md-alert-@{type} a:hover>@{svgGs} {
        fill: var(--a-hover-color) !important;
    }
    #write .md-alert-@{type} a:hover>img[src*="fill=text"] {
        filter: drop-shadow(@fillOffset 0 0 var(--a-hover-color)) !important;
    }
    // 主要按钮
    #write .md-alert-@{type} a kbd {
        color: #FFFFFF;
        background: @btnBg;
        border-color: @btnBg;
    }
    #write .md-alert-@{type} a kbd>img[src*="fill=text"] {
        filter: drop-shadow(@fillOffset 0 0 #FFFFFF) !important;
    }
    #write .md-alert-@{type} a kbd>@{svgGs} {
        fill: #FFFFFF !important;
    }
    #write .md-alert-@{type} a kbd:hover {
        color: @buttonForeHoverColor;
        background: var(--a-hover-color);
        border-color: var(--a-hover-color);
    }
    // 次要按钮
    #write .md-alert-@{type} @{kbdSec} {
        color: @btnBg;
        background: var(--d-bc);
        border-color: @btnBg;
    }
    #write .md-alert-@{type} @{kbdSec}>img[src*="fill=text"] {
        filter: drop-shadow(@fillOffset 0 0 @btnBg) !important;
    }
    #write .md-alert-@{type} @{kbdSec}>@{svgGs} {
        fill: @btnBg !important;
    }
    #write .md-alert-@{type} @{kbdSec}:hover @{svgGs} {
        fill: var(--a-hover-color) !important;
    }
    // 复选框控件
    #write .md-alert-@{type} .v-svg-input-checkbox>use {
        fill: @btnBg;
    }
    // 高亮
    #write .md-alert-@{type} mark {
        box-shadow: 0 -@markBgHeight 0 0 ~"var(--ac-@{accColor}-fade)" inset;
    }
    // 列表符号
    #write .md-alert-@{type} ::marker,
    #write .md-alert-@{type} li::before {
        color: ~"var(--ac-@{accColor})";
    }
}

// ----------
// 生成 GSA 简约风格样式
.genGitHubStyleAlertCSS(@type, @accColor, @btnBg) {
    #write .md-alert {
        padding: .25em 1em .5em 1em !important;
        border: @defQuoteBorderWidth solid var(--d-fc);
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
    }

    #write @{quote_details} .md-alert {
        border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
    }

    // 背景
    #write .md-alert-@{type} {
        border-color: ~"var(--ac-@{accColor}-lg)" !important;
    }
    // 针对 GSA 内的引用微调
    #write .md-alert-@{type} @{quote_details} {
        background: ~"var(--ac-@{accColor}-fade)" !important;
    }
    // 针对 after 提示
    #write .md-alert-text-@{type} .md-meta {
        color: ~"var(--ac-@{accColor})" !important;
        font-weight: normal !important;
        opacity: .5;
    }
    // 类型小标题
    #write .md-alert-text-@{type} {
        color: ~"var(--ac-@{accColor})" !important;
    }
    .genGitHubStyleAlertCssBase(@type, @accColor, @btnBg);
}

// 生成 GSA 简约风格
.genGSA_simple() {
    .genGitHubStyleAlertCSS(note, bu, @accColorBlue);
    .genGitHubStyleAlertCSS(tip, gn, @accColorGreen);
    .genGitHubStyleAlertCSS(important, pu, @accColorPurple);
    .genGitHubStyleAlertCSS(warning, bn, @accColorBrown);
    .genGitHubStyleAlertCSS(caution, rd, @accColorRed);
}

// ----------
// 生成 GSA 扁平风格样式
.genGitHubStyleAlertCssFt(@type, @accColor, @btnBg) {
    @alertTypePaddingTop4Ft: .5em;
    #write .md-alert {
        border-radius: 0 0 var(--v-r-b) var(--v-r-b) !important;
        padding-top: @alertTypePaddingTop4Ft !important;
        border: none;
    }

    // 背景
    #write .md-alert-@{type} {
        background: ~"var(--ac-@{accColor}-a)";
        border-top: 2px solid ~"var(--ac-@{accColor})" !important;
    }
    // 针对 GSA 内的引用微调
    #write .md-alert-@{type} @{quote_details} {
        background: ~"var(--d-bc)" !important;
        border-radius:  0 0 var(--v-r-s) var(--v-r-s) !important;
    }
    // 引用内的 GSA 微调
    #write @{quote_details} .md-alert-@{type} {
        border-radius: 0 0 var(--v-r-s) var(--v-r-s) !important;
    }
    // 针对 after 提示
    #write .md-alert-text-@{type} .md-meta {
        font-weight: normal;
        opacity: .5;
    }
    // 类型小标题
    #write .md-alert-text-@{type} {
        color: ~"var(--ac-@{accColor}-title)";
    }
    .genGitHubStyleAlertCssBase(@type, @accColor, @btnBg);
}

// 生成 GSA 扁平风格
.genGSA_flat() {
    .genGitHubStyleAlertCssFt(note, bu, @accColorBlue);
    .genGitHubStyleAlertCssFt(tip, gn, @accColorGreen);
    .genGitHubStyleAlertCssFt(important, pu, @accColorPurple);
    .genGitHubStyleAlertCssFt(warning, bn, @accColorBrown);
    .genGitHubStyleAlertCssFt(caution, rd, @accColorRed);
}

// ----------
// 生成 GSA 强调风格样式
.genGitHubStyleAlertCssEm(@type, @accColor, @btnBg) {
    @alertTypePaddingTop4em: .5em;
    #write .md-alert {
        border-radius: var(--v-r-b) !important;
        padding-top: @alertTypePaddingTop4em !important;
    }

    #write .md-alert>p:first-child {
        margin-bottom: 1em;
    }

    // 背景
    @alertTypePaddingTop4emLg: @alertTypePaddingTop4em + 2em; // 适配调整类型显示位置的高度
    #write .md-alert-@{type} {
        background: linear-gradient(180deg, ~"var(--ac-@{accColor})" @alertTypePaddingTop4emLg, ~"var(--ac-@{accColor}-a)" @alertTypePaddingTop4emLg, ~"var(--ac-@{accColor}-fade)") !important;
        border: @imgBorderWidth solid ~"var(--ac-@{accColor}-lg)" !important;
    }
    // 针对 GSA 内的引用微调
    #write .md-alert-@{type} @{quote_details} {
        background: ~"var(--d-bc)" !important;
    }
    // 引用内的 GSA 微调
    #write @{quote_details} .md-alert-@{type} {
        border-radius: var(--v-r-b) !important;
    }
    // 针对 after 提示
    #write .md-alert-text-@{type} .md-meta {
        color: ~"var(--ac-@{accColor}-a)" !important;
        font-weight: normal !important;
        opacity: .5;
    }
    // 类型小标题
    #write .md-alert-text-@{type} {
        color: #FFFFFF !important;
    }
    .genGitHubStyleAlertCssBase(@type, @accColor, @btnBg);
}

// 生成 GSA 强调风格
.genGSA_em() {
    .genGitHubStyleAlertCssEm(note, bu, @accColorBlue);
    .genGitHubStyleAlertCssEm(tip, gn, @accColorGreen);
    .genGitHubStyleAlertCssEm(important, pu, @accColorPurple);
    .genGitHubStyleAlertCssEm(warning, bn, @accColorBrown);
    .genGitHubStyleAlertCssEm(caution, rd, @accColorRed);
}
